<template>
  <div class="sort-container">
    排序:
    <span @click="activeClick(0)" :class="[activeClass === 0 ? 'active' : '']"
      >默认</span
    >
    <span @click="activeClick(1)" :class="[activeClass === 1 ? 'active' : '']"
      >最热</span
    >
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const emits = defineEmits(["sort"]);
const activeClass = ref(0);
const activeClick = (current: number) => {
  activeClass.value = current;
  console.log("发送事件", current);
  emits("sort", current);
};
</script>

<style scoped lang="less">
.sort-container {
  // position: fixed;
  // top: 60px;
  // z-index: 20;
  // // // left: 0;
  // width: 100%;
  // background-color: #f4f5f5;
  // margin-left: -100px;
  // padding-left: 100px;
  // box-sizing: content-box;
  span {
    cursor: pointer;
    margin: 0 5px;
    user-select: none;
  }
}
</style>
